<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Eventati</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	  
	<font color="red"><p>{{logout}}</p></font>
	<script type="text/javascript">
	function validateTerms(chk){
	if (chk.checked != 1){
	alert("Please make sure you agree to the Terms and conditions.")
	return false;
	}
	}
	<!-- Author: Dalia Hosny C5-07 -->
	<!-- The following code validates the search engine fields (search by and textbox so as for the user not to enter empty fields-->
	$(document).ready(function(){
	$('#searchEngineForm').validate();
	});
	
	<!-- Author: Dalia Hosny C5-07 -->
	<!-- The next code is a function that works when the search method is used, when the user types something in the third field this function calls the method autoCompleteSearch which in return retrieves data from the database and shows it in the form of real-time data in the box of the search box -->

	$(document).ready(function(){
	     $( "input#autocompleteSearch" ).autocomplete({
	                            source: "{% url autoCompleteSearch %}",
	                            minLength: 1,
	                            autoFocus: true

	        });
	});
	</script>
	
	<!-- Author: Amina Kadry This script is used to validate that the e-mail is correct and that the password is same like confirm password and that he 
	filled all fields required -->
	
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
	<style type="text/css">
	
	* { font-family: Verdana; font-size: 96%; }
	label { width: 10em; float: left; }
	label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
	p { clear: both; }
	.submit { margin-left: 12em; }
	em { font-weight: bold; padding-right: 1em; vertical-align: top; }
	</style>
	  <script>
	  $(document).ready(function(){
		    $("#signupForm").validate({
		    	rules: {
					confirm_password: {
						equalTo: "#cpassword"
					} 
		    	}
		    });
		  });
	  </script>
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
   <ul class="nav">
          <a class="brand" href="/homePage/">Eventati</a>
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
	
		<h1>Welcome to Eventati</h1>
		        <br>
        		<h2>Search for events here:</h2>
		        <br>
				<!-- Author: Dalia Hosny C5-07 -->
				<!-- this code displays the search engine form in the Dash board home -->
				<h3>{{logOut}}</h3>
				  <form id = "searchEngineForm" action="/searchEngine/" method="POST">
				   {%csrf_token%}
				    <select id = "drop-down-list" name="Categories" class="required">
				    <option value="" selected="selected">Search by...</option>
				      <option value="Name">Name</option>
				      <option  value="Location">Location</option>
				      <option  value="Tag">Tag</option>
				      <option  value="Category">Category</option>
				    </select>
				    <input id = "autocompleteSearch" type="text" size="60" name="search" class="required" minlength="1">
				    <input type="submit" value="Search now!" ><br>
				    </form>
					<br>
					<form action = "/login/ " method = "POST">
					 {%csrf_token%}
					<p>Email: <input type="text" name=email size="10">
					<p>Password: <input type="password" name=password size="10">
					<button type="submit" value="submit"> Login </button>
					<font color="red"><p>{{match}}</p></font>
					<font color="red"><p>{{notActive}}</p></font>
					<font color="red"><p>{{notFound}}</p></font>
					</form>
					
					<form action="/change/" method = "POST">
					<button type ="submit" value = "submit" >Reset Password</button></a>
					</form>
      </div>

      <!-- Author: Amina Kadry This form is used for the user to sign up for a new account by entering the required fields-->
      
	<form class="cmxform" id="signupForm" method="POST" action="/signup/">
	 <fieldset>
	   	<legend>Registration</legend>
		   <p>
		     <label for="cfirstname">First Name</label>
		     <em>*</em><input id="cfirstname" name="first_name" type="text" size="25" class="required" minlength="2" value={{firstName}}>
		   </p>
		   <p>
		     <label for="clastname">Last Name</label>
		     <em>*</em><input id="clastname" name="last_name" type="text" size="25" class="required" minlength="2" value={{lastName}}>
		   </p>
		   <p>
		     <label for="cemail">E-Mail</label>
		     <em>*</em><input id="cemail" name="email" type="text" size="25" class="required email" value = {{getEmail}}> <font color = "RED">{{emailExists}}</font>
		   </p>
		   <p>
		     <label for="cpassword">Password</label>
		     <em>*</em><input id="cpassword" name="password" type="password" size="25" class="required password" minlength="5" value="" >
		   </p>
		   <p>
		     <label for="cconfirmpassword">Confirm</label>
		     <em>*</em><input id="cconfirmpassword" name="confirm_password" type="password" size="25"  class="required password" minlength="5" value="" >

		   </p>
		   <p>
		    <label for="cphone">Phone</label>
		      <em>*</em><input id="cphone" name="phone" type="number" size="25" class="required" minlength = "8"  value={{phoneNum}}>

		   </p>

		<input type=checkbox name=chk1> I Agree to the terms and Conditions<a href="/Terms&Conditions/"> Terms and Conditions</a>
	
	<br>
	 <p>
	    <input class="submit" type="submit" value="SIGNUP" onClick="return validateTerms(chk1);"/></fieldset>
	   </p>



	</a>

	</p>
	</form>

      <hr>

      <footer>
      <p class="pull-center">
		 <a href="/AboutUs/">About Us</a>
				<a href="/ViewInstructions/">Instructions</a>
				<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
				<a href  ="/News/">  Latest News and Updates</a>
				<a href ="/Faqs/"> FAQS</a>
				<a href ="/Contactus/"> Contactus</a>
				<p class="pull-right"><a href="#">Back to top</a></p>

				        <p>&copy; Company 2012</p>      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>
